<template>
  <view class="top">
    <view class="avatar">
      <image :src="sheep.$url.cdn(state.avatar || '/storage/storelevel/20250410/54cf8f23d18011b35a5d21159bfb31f9.png')"></image>
      <!-- <su-image
        v-if="state.avatar"
        :current="0"
        :src="sheep.$url.cdn(state.avatar || '/storage/storelevel/20250410/54cf8f23d18011b35a5d21159bfb31f9.png')"
        :width="140"
        :height="140"
        mode="aspectFill"
      ></su-image> -->
    </view>
    <view class="con">
      <view class="con-top">
        <view class="title">{{ name }}</view>
        <view class="level"><view class="text">LV1</view></view>
        <view class="img"><image :src="storeLevel[1]"></image></view>
      </view>
      <view class="con-bottom">
        <!-- 评分 -->
        <view class="rate">
          <view v-for="i in 5" :key="i">
            <!-- 如果是前 rating 个，显示实心星星 -->
            <image
              v-if="i <= rating"
              :src="sheep.$url.cdn('/storage/default/20250522/0d2fbb684199b1a160b1031f986a1962.png')"
              alt="Filled Star"
              class="star"
            />
            <!-- 否则显示灰色星星 -->
            <image
              v-else
              :src="sheep.$url.cdn('/storage/default/20250522/aeb5939595149906406194aa94d2a7b2.png')"
              alt="Gray Star"
              class="star"
            />
          </view>
        </view>
        
      </view>
    </view>
    <view class="btn-box" @tap="handleShare">
      <image :src="sheep.$url.cdn('/storage/default/20250522/a2384fa073c9fbb5183d56eb3452d91e.png')" mpde=""></image>
      <view>分享店铺</view>
    </view>
  </view>
</template>
<script setup>
import sheep from '@/sheep';
import { computed, reactive, watch, nextTick } from 'vue';
import { storeLevel } from '../tools/enum';

const props = defineProps({
  thumb: { // 头像
    type: String,
    default: '',
  },
  name: { // 店铺名称
    type: String,
    default: '',
  },
  rating: { // 店铺星级
    type: Number,
    default: 0,
  },
});

const state = reactive({
  avatar: props.thumb
})

watch(() => props.thumb, (newVal) => {
  nextTick(() => {
    console.log(newVal,'newVal==')
    state.avatar = newVal
  })
},
{ deep: true, immediate: true })

console.log(props.thumb, 'thumb==')


const handleShare = () => {
  console.log('share btn')
}

</script>
<style lang="scss" scoped>
@import '../style/basic.scss';

.top {
  padding: 17rpx 20rpx 0;
  display: flex;
  background-color: #fff;
  height: 104rpx;
  .avatar {
    width: 140rpx;
    height: 140rpx;
    max-height: 140rpx;
    border-radius: 50%;
    border: 6rpx solid #fff;
    position: relative;
    top: -60rpx;
    image {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
  }
  .btn-box {
    width: 134rpx;
    height: 36rpx;
    @include flex-center-center;
    border-radius: 8rpx;
    height: 36rpx;
    border: 1rpx solid #CCCCCC;
    image {
      min-width: 22rpx;
      width: 22rpx !important;
      height: 22rpx !important;
      margin-right: 6rpx;
    }
    view {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 22rpx;
      color: $primary-second-color;
    }
  }

  .con {
    flex: 1;
    margin-left: 11rpx;
    .con-top {
      @include flex-center;
      .title {
        font-family: $font-PF-Bold;
        color: $primary-one-color;
        font-weight: bold;
        margin-right: 6rpx;
      }
      .level {
        width: 99rpx;
        height: 32rpx;
        
        background-image: url('https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250522/6990a4e9612a3ebf11ebd681f46181e0.png');
        background-size: 99rpx 32rpx;
        background-repeat: no-repeat;
        position: relative;;
        .text {
          font-family: $font-PF;
          font-weight: bold;
          font-size: 23rpx;
          color: #FFFFFF;
          font-style: italic;
          position: absolute;
          top: 46%;
          transform: translateY(-50%);
          right: 16rpx;
        }
      }
      .img {
        width: 48rpx;
        height: 43rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }
    }
    .con-bottom {
      margin-top: 12rpx;
      .rate {
        display: flex;
        align-items: center;
      }
  
      .star {
        width: 33rpx;
        height: 30rpx;
        margin-right: 6rpx;
      }
    }
  }
}
</style>